<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>光盘摆渡任务</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <link href="./bootstrap/css/datetimepicker.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/global.css" />
    <link rel="stylesheet" href="./css/file-task.css" />
    <link rel="stylesheet" href="./css/ferry-task.css" />
    <script src="./js/jquery-1.11.3.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script src="./bootstrap/js/moment.js"></script>
    <script src="./bootstrap/js/datetimepicker.js"></script>
    <script src="./js/global.js"></script>
  </head>

  <body>
    <div class="container col-lg-12">
      <div class="navigation">
        <img class="nav-logo float-left" src="./img/logo.png" alt="logo" />
        <div class="nav-text float-left">标准版</div>
        <div class="nav-drop dropdown float-right">
          <a
            href="#"
            class="dropdown-toggle"
            data-toggle="dropdown"
            role="button"
            aria-haspopup="true"
            aria-expanded="false"
            >ADMIN <span class="caret"></span
          ></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <span class="dropdown-menu-top"></span>
            <li><a href="#">个人信息</a></li>
            <li><a href="#">修改密码</a></li>
          </ul>
        </div>
        <img class="nav-avatar float-right" src="./img/avatar.png" alt="头像" />
      </div>
        <div id="sidebar" class="sidebar">
          <ul>
            <li><a href="home.html"> 首页</a></li>
            <li><a href="file-task.html"> 文件传输任务</a></li>
            <li><a href="execute-list.html"> 执行列表</a></li>
            <li><a href="task-config.html"> 文件传输任务配置</a></li>
            <li class="active"><a href="ferry-task.html"> 光盘摆渡任务</a></li>
            <li><a href="log-list.html"> 日志管理</a></li>
            <li><a href="user.html"> 个人中心</a></li>
          </ul>
          <ul class="m-hide icon-sidebar">
            <li>
              <a
                href="home.html"
                data-toggle="tooltipp"
                data-placement="right"
                title="首页"
              >
              </a>
            </li>
            <li>
              <a
                href="file-task.html"
                data-toggle="tooltipp"
                data-placement="right"
                title="文件传输任务"
              >
              </a>
            </li>
            <li>
              <a
                href="execute-list.html"
                data-toggle="tooltipp"
                data-placement="right"
                title="执行列表"
              >
              </a>
            </li>
            <li>
              <a
                href="task-config.html"
                data-toggle="tooltipp"
                data-placement="right"
                title="文件传输任务配置"
              >
              </a>
            </li>
            <li class="active">
              <a
                href="ferry-task.html"
                data-toggle="tooltipp"
                data-placement="right"
                title="光盘摆渡任务"
              >
              </a>
            </li>
            <li>
              <a
                href="log-list.html"
                data-toggle="tooltipp"
                data-placement="right"
                title="日志管理"
              >
              </a>
            </li>
            <li>
              <a
                href="user.html"
                data-toggle="tooltipp"
                data-placement="right"
                title="个人中心"
              >
              </a>
            </li>
          </ul>
          <div id="flod-btn" class="flod-btn"></div>
        </div>
        <div id="m-content" class="content">
          <p>光盘摆渡任务</p>
          <div class="card-1 float-left panel">
            <ul>
              <p>发送任务</p>
              <li>未审核</li>
              <li>审核通过</li>
              <li>审核未通过</li>
              <li>正在收集</li>
              <li>等待刻录</li>
              <li class="active">正在刻录</li>
              <li>刻录成功</li>
              <li>刻录失败</li>
            </ul>
            <div></div>
            <ul>
              <p>接收任务</p>
              <li>未审核</li>
              <li>审核通过</li>
              <li>审核未通过</li>
              <li>正在收集</li>
              <li>等待刻录</li>
              <li>正在刻录</li>
              <li>刻录成功</li>
            </ul>
          </div>
          <div class="card-2 float-right panel">
            <div class="title" style="height: 38px;">
              <i class="float-right glyphicon glyphicon-refresh"></i>
              <div class="input-group float-right">
                <div class="input-group-btn">
                  <button
                    type="button"
                    class="btn btn-xs btn-default dropdown-toggle"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                  >
                    任务名称 <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu">
                    <li><a href="#">任务1</a></li>
                    <li><a href="#">任务2</a></li>
                  </ul>
                </div>
                <input
                  type="text"
                  class="form-control input-sm"
                  aria-label="..."
                  placeholder="请输入"
                />
              </div>
            </div>
            <div class="table-cont">
              <div class="table-bottom">
                <table
                  id="m-tab-bottom"
                  class="table text-center"
                  style="text-overflow: ellipsis; white-space: nowrap"
                >
                  <thead>
                    <tr>
                      <td>光盘序号</td>
                      <td>最新状态</td>
                      <td>创建时间</td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1/1</td>
                      <td>摆渡成功</td>
                      <td>2020-03-16 19:13:00</td>
                    </tr>
                    <tr>
                      <td>1/1</td>
                      <td>摆渡成功</td>
                      <td>2020-03-16 19:13:00</td>
                    </tr>
                    <tr>
                      <td>1/1</td>
                      <td>摆渡成功</td>
                      <td>2020-03-16 19:13:00</td>
                    </tr>
                    <tr>
                      <td>1/1</td>
                      <td>摆渡成功</td>
                      <td>2020-03-16 19:13:00</td>
                    </tr>
                    <tr>
                      <td>1/1</td>
                      <td>摆渡成功</td>
                      <td>2020-03-16 19:13:00</td>
                    </tr>
                    <tr>
                      <td>1/1</td>
                      <td>摆渡成功</td>
                      <td>2020-03-16 19:13:00</td>
                    </tr>
                    <tr>
                      <td>1/1</td>
                      <td>摆渡成功</td>
                      <td>2020-03-16 19:13:00</td>
                    </tr>
                    <tr>
                      <td>1/1</td>
                      <td>摆渡成功</td>
                      <td>2020-03-16 19:13:00</td>
                    </tr>
                    <tr>
                      <td>1/1</td>
                      <td>摆渡成功</td>
                      <td>2020-03-16 19:13:00</td>
                    </tr>
                    <tr>
                      <td>1/1</td>
                      <td>摆渡成功</td>
                      <td>2020-03-16 19:13:00</td>
                    </tr>
                    <tr>
                      <td>1/1</td>
                      <td>摆渡成功</td>
                      <td>2020-03-16 19:13:00</td>
                    </tr>
                    <tr>
                      <td>1/1</td>
                      <td>摆渡成功</td>
                      <td>2020-03-16 19:13:00</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="table-top">
                <table id="m-tab-top" class="table text-center">
                  <thead>
                    <tr>
                      <td>状态</td>
                      <td>文件传输任务名称</td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><span class="dot dot-waring-bg"></span></td>
                      <td>任务名称...</td>
                    </tr>
                    <tr>
                      <td><span class="dot dot-success-bg"></span></td>
                      <td>任务名称...</td>
                    </tr>
                    <tr>
                      <td><span class="dot dot-waring-bg"></span></td>
                      <td>任务名称...</td>
                    </tr>
                    <tr>
                      <td><span class="dot dot-success-bg"></span></td>
                      <td>任务名称...</td>
                    </tr>
                    <tr>
                      <td><span class="dot dot-waring-bg"></span></td>
                      <td>任务名称...</td>
                    </tr>
                    <tr>
                      <td><span class="dot dot-danger-bg"></span></td>
                      <td>任务名称...</td>
                    </tr>
                    <tr>
                      <td><span class="dot dot-success-bg"></span></td>
                      <td>任务名称...</td>
                    </tr>
                    <tr>
                      <td><span class="dot dot-success-bg"></span></td>
                      <td>任务名称...</td>
                    </tr>
                    <tr>
                      <td><span class="dot dot-success-bg"></span></td>
                      <td>任务名称...</td>
                    </tr>
                    <tr>
                      <td><span class="dot dot-success-bg"></span></td>
                      <td>任务名称...</td>
                    </tr>
                    <tr>
                      <td><span class="dot dot-success-bg"></span></td>
                      <td>任务名称...</td>
                    </tr>
                    <tr>
                      <td><span class="dot dot-success-bg"></span></td>
                      <td>任务名称...</td>
                    </tr>
                   
                  </tbody>
                </table>
              </div>
            </div>
            <div class="paging">
              <span>共29条</span>
              <div class="dropup">
                <button
                  class="btn m-btn btn-xs btn-default dropdown-toggle"
                  type="button"
                  id="dropdownMenu1"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="true"
                >
                  20条/页
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                  <li><a href="#">5条/页</a></li>
                  <li><a href="#">10条/页</a></li>
                </ul>
              </div>
              <p><button class="btn m-btn btn-default btn-xs">首页</button></p>
              <nav aria-label="Page navigation ">
                <ul class="pagination">
                  <li>
                    <a href="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <li><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li>
                    <a href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
              <p>
                <button class="btn m-btn btn-default btn-xs">尾页</button>
              </p>
            </div>
          </div>
        </div>
    </div>
    <script>
      $(function () {
        // 列表点击选中的效果
        $("#m-tab-top>tbody>tr,#m-tab-bottom>tbody>tr").click(function () {
          var i = $(this).index();
          $($("#m-tab-top>tbody>tr")[i])
            .toggleClass("tr-active")
            .siblings()
            .removeClass("tr-active");
          $($("#m-tab-bottom>tbody>tr")[i])
            .toggleClass("tr-active")
            .siblings()
            .removeClass("tr-active");
        });
        $("#datetimepicker1,#datetimepicker2").datetimepicker({
          format: "YYYY-MM-DD",
          locale: moment.locale("zh-cn"),
          defaultDate: "",
        });
      });
    </script>
  </body>
</html>
